<template>
    <Row :gutter="30">
        <Col span="30">
            <Card :bordered="false">
                <p slot="title" style="font-size: large;">个人中心</p>
                <!-- <Button type="primary" icon="ios-search" @click="modal1 = true">查看</Button> -->
                <Table stripe border :columns="columns" :data="tableData" size="large" ref="table">
                  <!-- 操作 -->
                  <template slot="action" slot-scope="props">
                    <Button type="warning" @click="handleAdd(props.id)" size="small">修改</Button>
                  </template>
                </Table>
            </Card>
            <Modal v-model="formVisible" :mask-closable="false" :closable="false" :title="'修改'" width="900">
              <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="姓名" prop="name">
                  <Input v-model="modal.name" placeholder="姓名" size="large" required="true"></Input>
                </FormItem>
                <FormItem label="登录账号/电话" prop="phone">
                  <Input v-model="modal.phone" placeholder="登录账号/电话"></Input>
                </FormItem>
                <FormItem label="登录密码" prop="password">
                  <Input type="password" v-model="modal.password" placeholder="登录密码" size="large" required="true"></Input>
                </FormItem>
                <FormItem label="小区" :hidden="houseshow==1 ? true : false" >
                    <Select v-model="modal.houseList" placeholder="请选择小区" size="large" style="width:100%" multiple>
                        <Option v-for="item in houseL" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="权限管理" prop="roleId">
                  <RadioGroup v-model="modal.roleId">
                    <div :hidden="this.typeInt==2 ? true : false">
                      <Radio label="2">服务商管理员</Radio>
                      <Radio label="3">服务商普通员工</Radio>
                    </div>
                    <div :hidden="this.typeInt==1 ? true : false">
                      <Radio label="4">物业管理员</Radio>
                      <Radio label="5">小区管理员</Radio>
                    </div>
                  </RadioGroup>
                </FormItem>
              </Form>

              <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
              </div>
            </Modal>
        </Col>
    </Row>
</template>
<script>
    import { getUserInfo } from "@/api/user";
    //校验规则
    const rules = {
      name: [
        {
          required: true,
          message: "姓名不能为空",
          trigger: "blur"
        }
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "blur" },
        { min: 6, message: "最少6位密码" }
      ],
      roleId: [
        {
          required: true,
          message: "请选择权限",
          trigger: "blur"
        }
      ],
      phone: [
        {
          required: true,
          message: "登录账号或电话不能为空",
          trigger: "blur"
        }
      ],
      power: [
        {
          required: true,
          message: "请选择权限",
          type: "number",
          trigger: "blur"
        }
      ]
    };
    //加载数据
    let loadData = function() {
      let params = this.filter;
      //与后台交换数据
      this.postRequest("/api/user/openPersonal").then(res => {
        console.log(res)
        if (res.code == 20000) {
          this.tableData = res.data;
        } else {
          this.tableData = [];
          this.$Message.error({
            content: res.message,
            duration: 5
          });
        }
      });
    };
    //打开页面
    let handleAdd = function(id) {
      console.log(id);
      this.modal = {};
      let url = "/user/openModel";
      let params = {};
      params.id = id;
      this.postRequest(url, params).then(res => {
      if (res.code == 20000) {
        console.log(res);
        this.deptList = res.data.housings;
        if (res.data.user) {
          res.data.user.roleId = String(res.data.user.roleId);
          this.modal = res.data.user;
          this.optionsParent= res.data.deptList;
          if(res.data.user.typeInt==2){
            this.houseshow=0;
            this.typeInt=2;
            let params = {};
            params.parentId = res.data.user.deptId;
            this.postRequest("/api/user/housingByPorpertId", params).then(res => {
              console.log(res)
              this.houseL = res.data;
            });
          }else{
            this.houseshow=1;
            this.typeInt=1;
          }
        }
        this.formVisible = true;
      } else {
        this.$Message.error({
          content: res.message,
          duration: 5
        });
      }
    });
    this.formVisible = true;
    };
    //保存
    let save = function() {
      if (this.modal.deptId == undefined) {
        this.$Message.error("请选择部门");
        this.formLoading = false;
      } else {
        this.postRequest("/api/user/saveOrUpdate", this.modal).then(res => {
          if (res.code == 20000) {
            this.formLoading = false;
            this.formVisible = false;
            this.houseshow=1;
            this.$Message.success("保存成功");
            this.loadData();
          } else {
            this.formLoading = false;
            this.$Message.error({
              content: res.message,
              duration: 5
            });
          }
        });
      }
    };
    //保存
    let handleSubmit = function() {
      this.$refs["form2"].validate(valid => {
        if (valid) {
          this.formLoading = true;
          this.save();
        }
      });
    };

    let onCancel = function() {
      this.$refs["form2"].resetFields();
      this.formLoading = false;
      this.formVisible = false;
      this.houseshow=1;
    };
    export default {
        name: 'person',
        data() {
            return {
              tableData:[],
              formVisible:false,
              //表单提交状态
              formLoading: false,
              modal:{},
              //查询条件
              filter: {},
              //验证规则
              rule: rules,
              houseshow:1,
              houseL:[],
              houseList:[],//小区
              typeInt: 1,
              columns: [
              {
                title: "姓名",
                key: "name"
              },
              {
                title: "登录账号/电话",
                key: "phone"
              },
              {
                title: "密码",
                key: "password"
              },
              {
                title: "用户权限",
                key: "roleId",
                render: (h, params) => {
                  let _this = this;
                  let texts = "";
                  if (params.row.roleId == 2) {
                    texts = "服务商管理员";
                  } else if (params.row.roleId == 3) {
                    texts = "服务商普通员工";
                  } else if (params.row.roleId == 4) {
                    texts = "物业管理员";
                  } else if (params.row.roleId == 5) {
                    texts = "小区管理员";
                  }
                  return h(
                    "div",
                    {
                      props: {}
                    },
                    texts
                  );
                }
              },
              {
                title: "上级机构",
                key: "deptName"
              },
              {
                title: "账户状态",
                key: "status",
                align: "center",
                render: (h, params) => {
                  let self = this;
                  const switchList = [
                    {
                      slot: "open",
                      name: "开启"
                    },
                    {
                      slot: "close",
                      name: "禁用"
                    }
                  ];
                  return h("div", [
                    h(
                      "i-switch",
                      {
                        //数据库1是启用，-1是禁用
                        props: {
                          disabled:true,
                          size: "large",
                          type: "primary",
                          value: params.row.status === 1 //控制开关的打开或关闭状态，官网文档属性是value
                        },
                        style: {
                          marginRight: "5px"
                        },
                        on: {
                          "on-change": value => {
                            //触发事件是on-change,用双引号括起来,参数value是回调值，并没有使用到
                            this.openorclose(params.row.status,params.row.id); //params.index是拿到table的行序列，可以取到对应的表格值
                          }
                        }
                      },
                      switchList.map(item => {
                        return h(
                          "span",
                          {
                            slot: item.slot
                          },
                          item.name
                        );
                      })
                    )
                  ]);
                }
              },
              {
                key: "action",
                title: "操作",
                align: "center",
                render: (h, params) => {
                  return h(
                    "div",
                    this.$refs.table.$scopedSlots.action({
                      id: params.row.id,
                      index: params.index
                    })
                  );
                }
              }
            ],
          }
        },
        created:function(){
          this.loadData();//获取信息
        },
        methods: {
            loadData,
            handleAdd,
            handleSubmit,
            onCancel,
            save,
        }
    }
</script>
